<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../js库/mock.js"></script>
    <script src="../../js库/vue.js"></script>
    <title>浮动</title>
    <style>
        /* 
            css浮动
            网页布局本质用css摆放盒子
            传统网页布局的三种方式 盒子如何排列顺序
                普通流(标准流) 
                    标签按规定好的默认方式排列
                        块独占一行 从上往下顺序排列
                        行内元素 从左到右排列 碰到块级元素边缘则自动换行
                浮动  改变元素的默认排列方式
                    多个块级元素如何排列成一行
                    如何实现两个盒子左右对齐
                 最典型应用 可以让多个块级元素一行内排列显示
                 
                定位
                
            
            三种布局方式一起完成
            网页布局的第一准则: 
                多个块级元素纵向排列使用标准流  多个块级元素横向排列使用浮动不使用inline-block
        */
        /* 
            浮动 float {none  left right}
                float用于创建浮动框 将其移到一边 直到左右边缘或包含块或另一个浮动框的编译
            浮动特性
                浮动元素会脱离标准流(div加了浮动就不会单独占一行)
                    移动到指定位置
                    浮动的盒子不再保留原先的位置(原先的位置会被占叠加)
                浮动元素会一行显示并且元素顶部对齐
                浮动元素具有行内块元素的特征 任何元素都可以浮动
                    如果行内元素设置了浮动 则不需要转换成行内块/块级元素 就可以设置高宽
                    块级元素如果没设置宽度默认和父级一样宽 设置了浮动后大小根据内容决定(行内块元素特点)
                    浮动盒子中间没有缝隙(与行内块元素不同)

        */
      /* 
        浮动流元素经常和标准流父级搭配使用   
            为了约束浮动元素的位置 一般采用的策略是
                先用标准流父亲排列上下位置 之后内部子元素采取浮动排列左右位置1 符合网页布局第一准则
                先设置盒子大小 再设置盒子的位置
      */
        .left,
        .right {
        
            text-align: center;
            line-height: 100px;
           float: left;
            width: 100px;
            height: 100px;
            background-color: green;
        }
        .right {
            float: right;
        }
        .div1 {
            width: 300px;height: 200px;
            float: left;
            background-color: pink;
        }
        .div2 {
            width: 300px;height: 40px;
            float: left;
            background-color: blue;
        }
        /* .a {
          float: left;
          
            width: 300px;
            height: 300px;
            background-color: green;
        }

        .b {
            background-color: palegreen;
        }

        .c {
            background-color: yellow;
        }
        div.box  {
            width: 500px;
            height: 200px;
            border: solid;
        }
        .bo {
            width: 200px;height: 50px;
            display: inline-block;
        }
        .left {
            background-color: pink;
        }
        .right {
            background-color: green;
            margin-left: 100px;
            margin-right: 0px;
        } */
        .s1 {
            float: left;
            background-color: pink;
            width: 200px;
            height: 200px;
        }
        .s2 {
            width: 300px;
            height: 300px;
        
            background-color: green;
        }
        * {
            margin: 0; padding: 0;
        }
        div#root {
            margin: 0 auto;
            width: 1000px;
           height: 500px;
            background-color: green;
        }
        body {
            background-color: pink;
        }
        div.ul{
            float: left;
            width: 200px;
            height: 80%;
            background-color: palegreen;
        }
        div.pict {
            float: right;
            width: 500px;
            height: 80%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="ul"></div>
        <div class="pict"></div>
        <!-- <h1>浮动具有行内块元素</h1>
        <span class="s1">你好</span>
        <span class="s2">而非如果别人</span> -->
<!--        
        <h1>浮动</h1>
            <div class="left">你好</div>
            <div class="div1">你刚刚</div>
            <div class="div2">你刚刚</div> -->
            <!-- <div class="left">左</div>
            <div class="left">左</div>

            <div class="a">你好</div>
            <div class="right">右</div> -->
          
        <!-- <div class="a">1</div>
        <div class="a b">2</div>
        <div class="a c">3</div>
        <div class="box">
            <div class="bo left"></div>
            <div class="bo right"></div>
        </div> -->
    </div>
</body>
<script>
    new Vue({
        el: '#root',
        data() {
            return {
            }
        },
    })
</script>

</html>